<template>
    <div>

      <div class="makesContent">
        <el-row>
          <el-col :span="16">
            <el-form :model="ruleForm"   ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="APPID" prop="appKey" :rules="{ required: true, message: '请输入APPID', trigger: 'blur' }">
                <el-input v-model="ruleForm.appKey" style="width:500px"></el-input>
              </el-form-item>
              <el-form-item label="appSecret" prop="appSecret" :rules="{ required: true, message: '请输入appSecret', trigger: 'blur' }">
                <el-input v-model="ruleForm.appSecret" style="width:500px"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="name" :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }">
                <el-input v-model="ruleForm.name" style="width:500px"></el-input>
              </el-form-item>
              <el-form-item label="身份证" prop="idNumber" :rules="{ required: true, message: '请输入身份证', trigger: 'blur' }">
                <el-input v-model="ruleForm.idNumber" style="width:500px"></el-input>
              </el-form-item>
              <el-form-item label="手机" prop="mobile" :rules="{ required: true, message: '请输入手机号', trigger: 'blur' }">
                <el-input v-model="ruleForm.mobile" style="width:500px"></el-input>
              </el-form-item>
              <el-form-item label="工号" prop="workNumber" :rules="{ required: true, message: '请输入工号', trigger: 'blur' }">
                <el-input v-model="ruleForm.workNumber" style="width:500px"></el-input>
              </el-form-item>
              <el-form-item label="所属银行" prop="bankName" :rules="{ required: true, message: '请输入银行', trigger: 'blur' }">
                <el-input v-model="ruleForm.bankName" style="width:500px"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号" prop="bankNum" :rules="{ required: true, message: '请输入银行卡号', trigger: 'blur' }">
                <el-input v-model="ruleForm.bankNum" style="width:500px"></el-input>
              </el-form-item>
              <el-form-item label="身份证正面" prop="zidimg" >
                <el-input v-model="ruleForm.zidimg"  placeholder="请输入正面URL" style="width:500px"></el-input>
              </el-form-item>
              <el-form-item label="身份证反面" prop="fidimg" >
                <el-input v-model="ruleForm.fidimg" placeholder="请输入反面URL"  style="width:500px"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="8">
            <h5>生成结果：<el-button style="float: right" size="mini" @click="resultList=[]" type="primary">清空结果</el-button> </h5>
            <template v-for="c,indx in resultList">
              <el-card shadow="never" style="margin-bottom:10px">
                <div slot="header" class="clearfix">
                  <span>{{c.name}}</span>
                </div>
                <div class="datac">{{c.data}}</div>
              </el-card>
            </template>

          </el-col>
        </el-row>

      </div>
    </div>
</template>

<script>
    export default {
        name: "makedata",
        data(){
          return{
            resultList:[],
            ruleForm: {
              appKey:'',
              appSecret:'',
              bankNum:"",//银行卡
              workNumber:"",//工号
              name:"",//姓名
              mobile:"",//手机号
              bankName:"",//银行
              idNumber:"",//身份证
              certificateType:"1",
              zidimg:"",//正面身份证url
              fidimg:""//反面身份证url
            }
          }
        },
        created() {
        },
      methods:{
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.request.post('employees/getCode',this.ruleForm).then(res=>{

                if(res.code == 0){
                  var temps = {
                    name:this.ruleForm.name,
                    data:res.appKey
                  }
                  this.resultList.push(temps)

                }
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }

      }
    }
</script>

<style lang="scss" scoped>

  .datac{
    height:200px; overflow: auto;
    word-break:break-all;
  }
  .makesContent{
    margin:0 auto;
    min-width: 1000px;
    padding:20px;
    background: #FFF;
  }
</style>
